<template>
	<view>
		
		<u-popup :round="10" mode="center" :show="show_tips" @close="closeTips" >
			<view class="tips">
				<view class="title fz40 txt_c">{{tips_info.detail.title}}</view>
				<view class="tli flex flex_ac">
					<view class="label fz30">好友</view>
					<view class="value ml20">{{tips_info.detail.friend}}</view>
				</view>
				<view class="tli flex flex_ac">
					<view class="label fz30">卡牌</view>
					<view class="value ml20">{{tips_info.name}}</view>
				</view>
			</view>
		</u-popup>
		
		<view class="w100 flex flex_wrap flex_jc mt30">
			<view class="li w710 flex" v-for="(item,index) in list">
				<view class="bg_img">
					<u-image width="100%" height="100%" :src="item.card"></u-image>
				</view>
				<navigator :url="'/pages/kapai_detail/index?id='+item.kapai_id" class="card">
					<u--image :showLoading="true" :src="item.card" width="100%" height="100%"></u--image>
				</navigator>
				<view class="detail flex flex_ac flex_wrap" @click="openTips(item)">
					<view class="type w100 hidden1">{{item.danshu}}</view>
					<view class="name w100">{{item.name}}</view>
					<view class="level fz30 w100 flex">
						<view>等级:{{item.level}}</view>
						<view class="time col_999 ml20">{{item.created_at}}</view>
					</view>
				</view>
				<view class="sent flex flex_ac flex_jc" @click="openTips(item)">
					<view class="btn">{{item.typename}}</view>
					<view class="count" v-if="item.sort=='inc'">卡牌+1</view>
					<view class="count" v-if="item.sort=='dec'">卡牌-1</view>
				</view>
			</view>
			<view style="margin-top: 40%;" class="u-empty-area" v-if="list.length==0">
				<u-empty text="列表为空" mode="favor"></u-empty>
			</view>
			<view v-if="list.length>0">{{tips}}</view>
		</view>
	</view>
</template>

<script>
	import {getUkRecordList} from "@/api/api"
	export default {
		data() {
			return {
				page:1,
				list:[],
				count:0,
				tips:'数据加载中',
				show_tips:false,
				tips_info:[]
			}
		},
		
		onReachBottom(){
			if(this.list.length>=this.count){
				this.tips = '所有数据加载完成'
			}else{
				this.page += 1
				this.getUkRecordList()
			}
		},
		
		onLoad: function (option) {
			this.getUkRecordList()
		},
		onShow:function(){
			
			
		},
	
		methods:{
			
			openTips(info) {
				console.log(info.detail.status)
				if(info.detail.status){
					this.tips_info = info
					this.show_tips = true
				}
				
			},
			
			
			closeTips() {
			  this.show_tips = false
			},
			
			getUkRecordList(){
				getUkRecordList(this.page).then(res=>{
					this.count = res.data.total
					var data = res.data.data
					for(var i = 0 ;i<data.length;i++){
						this.list.push(data[i])
					}
					if(this.list.length>=this.count){
						this.tips = '所有数据加载完成'
					}
				})
			},
		}
	}
</script>
<style>
	/* 设置标题字体颜色*/
	.u-navbar__content__title{color: #FFFFFF!important;}
	/*去掉返回按钮 */
	.u-navbar__content__left{display: none!important;}
	.u-transition{width: 100%;height: 100%;}
</style>
<style scoped>
	.tli .value{width: 480rpx;font-size: 35rpx;}
	.tli .label{width: 100rpx;height: 50rpx;border-radius: 20rpx;border: 1px solid #1edada;color: #1edada;text-align: center;line-height: 50rpx;}
	.tli{margin-bottom: 20rpx;}
	.tips{width: 600rpx;background-color: #FFFFFF;padding: 20rpx;border-radius: 20rpx;}
	.li .sent .count{position: absolute;bottom: 12rpx;width: 140rpx;text-align: center;font-size: 30rpx;color: red;}
	.li .sent .btn1{background-color: #c2ccd8!important;}
	
	.li .sent .btn{height:40rpx;width:80rpx;background-color:#4699FF;text-align: center;font-size: 25rpx;color: #FFFFFF;
		border-radius: 20rpx;line-height: 40rpx;}
	.li .sent{position: relative;width: 140rpx;z-index: 2;}
	.li .detail .level{color: red;white-space:nowrap;}
	.li .detail .name{font-size:40rpx;font-weight:bold}
	.li .detail .type{font-size:40rpx;color : #f3ed4d;}
	.li .detail{margin-left:30rpx;width:370rpx;z-index: 2;}
	.li .card{height:200rpx;width: 140rpx;margin-left:30rpx;z-index: 2;}
	.li .bg_img{position: absolute;left: 0;top: 0;height: 260rpx;width: 710rpx;background-repeat: no-repeat;background-position: center;
				background-size: cover;-webkit-filter: blur(10px);-moz-filter: blur(10px);-o-filter: blur(10px);
				-ms-filter: blur(10px);filter: blur(10px);z-index: 1;}
	.li{box-shadow: 0 2px 6px 0 rgb(0 0 0 / 42%);padding: 30rpx 0;border-radius: 10rpx;position: relative;margin-bottom: 30rpx;}
</style>